<template>
  <div class="customermanagementlist">
    <div class="content">
      <div class="content-left">
        <div class="in_concent_left_1">
          <div
            v-for="(item, index) in tabsData"
            :key="index"
            :class="[
              'in_concent_left_pitch',
              tabIndex == item.key ? 'choose_itch' : '',
            ]"
            @click="handleTabChange(item.key)"
          >
            {{ item.value }}
          </div>
        </div>
      </div>
      <div class="content-right">
        <div style="display: flex">
          <div v-if="tabIndex == 1 || tabIndex == 2">
            <el-form ref="form" label-width="100px" :inline="true">
              <el-form-item label="客户所属区域">
                <el-select
                  clearable
                  filterable
                  v-model="orderSearch.customer_area_id"
                >
                  <el-option
                    v-for="item in websiteListDQ"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id + ''"
                  />
                </el-select>
              </el-form-item>
              <el-button type="primary" @click="querydata()" plain
                >查询</el-button
              >
              <el-button type="primary" @click="resetdata()" plain
                >重置</el-button
              >
              <el-button type="primary" @click="derivedata()" plain
                >导出</el-button
              >
            </el-form>
          </div>
          <div v-if="tabIndex == 3 || tabIndex == 4">
            <el-form ref="form" label-width="70px" :inline="true">
              <el-form-item label="所属销售">
                <el-select
                  v-model="orderSearch.belong_sale_id"
                  filterable
                  placeholder="请选择客户所属销售"
                >
                  <el-option
                    v-for="item in AdminBoxData"
                    :key="item.id"
                    :label="item.nickname"
                    :value="item.id + ''"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-button type="primary" @click="querydata()" plain
                >查询</el-button
              >
              <el-button type="primary" @click="resetdata()" plain
                >重置</el-button
              >
              <el-button type="primary" @click="derivedata()" plain
                >导出</el-button
              >
            </el-form>
          </div>
          <div v-if="tabIndex == 5 || tabIndex == 6">
            <el-form ref="form" :inline="true">
              <el-form-item label="所属客户" label-width="80px">
                <el-select
                  id="customer_down"
                  v-model="orderSearch.customer_id"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请选择"
                  :remote-method="searchCustomerList"
                >
                  <el-option
                    id="customer"
                    v-for="item2 in clientList"
                    :key="item2.id"
                    :label="item2.name"
                    :value="item2.id + ''"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="客户所属区域" label-width="100px">
                <el-select
                  clearable
                  filterable
                  v-model="orderSearch.customer_area_id"
                >
                  <el-option
                    v-for="item in websiteListDQ"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id + ''"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="所属销售" label-width="80px">
                <el-select
                  v-model="orderSearch.belong_sale_id"
                  filterable
                  placeholder="请选择客户所属销售"
                >
                  <el-option
                    v-for="item in AdminBoxData"
                    :key="item.id"
                    :label="item.nickname"
                    :value="item.id + ''"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-button type="primary" @click="querydata()" plain
                >查询</el-button
              >
              <el-button type="primary" @click="resetdata()" plain
                >重置</el-button
              >
              <el-button type="primary" @click="derivedata()" plain
                >导出</el-button
              >
            </el-form>
          </div>
          <div v-if="tabIndex == 7 || tabIndex == 8">
            <el-form ref="form" :inline="true">
              <el-form-item label="客户所属区域" label-width="100px">
                <el-select
                  clearable
                  filterable
                  v-model="orderSearch.customer_area_id"
                >
                  <el-option
                    v-for="item in websiteListDQ"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id + ''"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="时间类型">
                <el-radio-group
                  v-model="searchParams.time_type"
                  @input="handleChangeTimeType"
                >
                  <el-radio-button label="1">月</el-radio-button>
                  <el-radio-button label="3">周</el-radio-button>
                  <el-radio-button label="2">日</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <div style="display: inline-block; margin: 1px 10px 0px 0px">
                <template v-if="searchParams.time_type === '1'">
                  <el-date-picker
                    key="monthrange"
                    type="month"
                    value-format="yyyyMM"
                    v-model="searchParams.monthrange"
                    placeholder="选择月度"
                    style="width: 200px"
                    :clearable="false"
                  >
                  </el-date-picker>
                </template>
                <template v-else-if="searchParams.time_type === '2'">
                  <el-date-picker
                    key="monthrange"
                    value-format="yyyyMMdd"
                    type="date"
                    v-model="searchParams.daterange"
                    placeholder="选择日期"
                    style="width: 200px"
                    :clearable="false"
                  >
                  </el-date-picker>
                </template>
                <template v-if="searchParams.time_type === '3'">
                  <el-date-picker
                    key="weekrangeYearStart"
                    v-model="searchParams.start_year"
                    type="year"
                    placeholder="年份"
                    editable
                    :clearable="false"
                    value-format="yyyy"
                    format="yyyy 年"
                    style="width: 120px"
                  />
                  <el-select
                    key="weekrange1"
                    style="width: 100px"
                    v-model="searchParams.start_week"
                    filterable
                    clearable
                    placeholder="周"
                  >
                    <el-option
                      v-for="item in weeksData"
                      :key="item.key"
                      :label="item.value"
                      :value="item.key"
                    >
                    </el-option>
                  </el-select>
                </template>
              </div>
              <el-button type="primary" @click="querydata()" plain
                >查询</el-button
              >
              <el-button type="primary" @click="resetdata()" plain
                >重置</el-button
              >
              <el-button type="primary" @click="derivedata()" plain
                >导出</el-button
              >
            </el-form>
          </div>
          <div v-if="tabIndex == 9 || tabIndex == 10">
            <el-form ref="form" :inline="true">
              <el-form-item label="所属销售" label-width="80px">
                <el-select
                  v-model="searchParams.sale_id"
                  filterable
                  placeholder="请选择客户所属销售"
                >
                  <el-option
                    v-for="item in AdminBoxData"
                    :key="item.id"
                    :label="item.nickname"
                    :value="item.id + ''"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="选择所属月份" label-width="100px">
                <el-date-picker
                  key="monthrange"
                  type="month"
                  value-format="yyyyMM"
                  v-model="searchParams.monthrange"
                  :clearable="false"
                  placeholder="选择月度"
                  style="width: 200px"
                >
                </el-date-picker>
              </el-form-item>

              <el-button type="primary" @click="querydata()" plain
                >查询</el-button
              >
              <el-button type="primary" @click="resetdata()" plain
                >重置</el-button
              >
              <el-button type="primary" @click="derivedata()" plain
                >导出</el-button
              >
              <el-button type="primary" @click="SalesKPI()" plain
                >销售KPI</el-button
              >
            </el-form>
          </div>
          <div v-if="tabIndex == 11 || tabIndex == 12">
            <el-form ref="form" :inline="true">
              <el-form-item label="客户所属区域">
                <el-select
                  clearable
                  filterable
                  v-model="invoiced_areaquery.customer_area_id"
                >
                  <el-option
                    v-for="item in websiteListDQ"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id + ''"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="选择所属月份" label-width="100px">
                <el-date-picker
                  key="monthrange"
                  type="month"
                  value-format="yyyyMM"
                  v-model="invoiced_areaquery.create_month"
                  :clearable="false"
                  placeholder="选择月度"
                  style="width: 200px"
                >
                </el-date-picker>
              </el-form-item>

              <el-button type="primary" @click="querydata()" plain
                >查询</el-button
              >
              <el-button type="primary" @click="resetdata()" plain
                >重置</el-button
              >
              <el-button type="primary" @click="derivedata()" plain
                >导出</el-button
              >
              <el-button type="warning" plain icon="el-icon-warning"
                >7月份以前的具体运单无法查看</el-button
              >
            </el-form>
          </div>
          <div v-if="tabIndex == 13 ||tabIndex == 14 || tabIndex == 15 || tabIndex == 16 || tabIndex == 17 || tabIndex == 18" style="margin: 0px 0px 10px 0px;">
              <el-button type="primary" @click="derivedata()" plain
                >导出</el-button
              >
          </div>
        </div>
        <div v-if="tabIndex == 11 || tabIndex == 12">
          <el-table
            ref="tableRef"
            :data="tableData"
            border
            :key="tabIndex"
            id="tablestyle"
            :max-height="HeightList"
            style="width: 482px"
            @row-click="DerivedRegion"
          >
            <el-table-column
              prop="customer_area_id_name"
              label="区域"
              width="150"
            >
              <!-- <template slot-scope="scope">
            <span @click="DerivedRegion(scope.row)">{{scope.row.customer_area_id_name}}</span>
          </template> -->
            </el-table-column>
            <el-table-column prop="create_month" label="月份" width="150">
            </el-table-column>
            <el-table-column
              prop="total_freight"
              label="未回款金额"
              width="180"
            >
              <template slot-scope="scope">
                <el-tag type="danger">{{ scope.row.total_freight }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-else-if="tabIndex == 13 ||tabIndex == 14 || tabIndex == 15 || tabIndex == 16 || tabIndex == 17 || tabIndex == 18">
          <el-table
          ref="tableRef"
          :data="tableData"
          border
          style="width: 100%"
          :key="tabIndex"
          id="tablestyle"
          :max-height="HeightList"
        >
          <el-table-column
            prop=""
            label="序号"
            width="50"
            type="index"
          ></el-table-column>
          <el-table-column
            v-for="(item, index) in headerData"
            :key="index"
            :label="item.title"
            :prop="item.show_name"
            :align="item.align"
            :width="item.width"
          >
          <template slot-scope="scope">
              <span v-if="item.show_name == 'waybill_no' "  style="color: #2798ff;" @click="pageJumps(scope.row)">{{scope.row[item.show_name] }}</span>
              <span v-else>{{ scope.row[item.show_name] }}</span>
          </template>
          </el-table-column>
        </el-table>
        </div>
        <div style="margin: 10px 0px 0px 0px" v-else>
          <el-table
            ref="tableRef"
            :data="tableData"
            border
            style="width: 100%"
            :key="tabIndex"
            id="tablestyle"
            :max-height="HeightList"
          >
            <el-table-column
              prop=""
              label="序号"
              width="50"
              type="index"
            ></el-table-column>
            <el-table-column
              v-for="(item, index) in headerData"
              :key="index"
              :align="item.align"
              :width="item.width"
              :prop="item.show_name"
              :label="item.title"
            >
            </el-table-column>
          </el-table>
        </div>
          <!-- 分页 -->
        <div style="margin: 10px 0px 0px 0px;display: flex;justify-content: flex-end;" v-if="tabIndex == 17 ||tabIndex == 18 ">
          <el-pagination
          @size-change="handleSizeChangeObj"
          @current-change="handleCurrentChangeObj"
          :current-page="ReimburPaging.currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="ReimburPaging.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="ReimburPaging.total">
        </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      title="销售KPI"
      :visible.sync="centerDialogVisible"
      width="800px"
      center
    >
      <div>
        <el-form ref="form" :inline="true">
          <el-form-item label="所属销售" label-width="100px">
            <el-select
              v-model="searchResult.sale_id"
              filterable
              placeholder="请选择客户所属销售"
              style="width: 190px"
            >
              <el-option
                v-for="item in AdminBoxData"
                :key="item.id"
                :label="item.nickname"
                :value="item.id + ''"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="客户所属区域" label-width="100px">
            <el-select
              clearable
              filterable
              v-model="searchResult.area_id"
              style="width: 190px"
            >
              <el-option
                v-for="item in websiteListDQ"
                :key="item.id"
                :label="item.name"
                :value="item.id + ''"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="选择所属月份" label-width="100px">
            <el-date-picker
              key="monthrange"
              type="month"
              value-format="yyyyMM"
              v-model="searchResult.create_month"
              :clearable="false"
              placeholder="选择月度"
              style="width: 190px"
            >
            </el-date-picker>
          </el-form-item>
          <el-button
            type="primary"
            @click="QueryKPIdata()"
            plain
            style="margin: 0px 0px 10px 0px"
            >查询</el-button
          >
          <el-button
            type="primary"
            @click="restqueryKPI()"
            plain
            style="margin: 0px 0px 10px 10px"
            >重置</el-button
          >
          <el-button type="primary" @click="newlyincreased()">新增</el-button>
          <el-button type="primary" @click="toleadcreased()">导入</el-button>
        </el-form>
      </div>
      <div>
        <el-table :data="saletableData" stripe style="width: 100%" border>
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="area_id_name" label="区域" width="120">
          </el-table-column>
          <el-table-column prop="sale_id_name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="assignment" label="任务" width="120">
          </el-table-column>
          <el-table-column prop="create_month" label="月份" width="120">
          </el-table-column>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div style="float: right; margin: 5px 0px 0px 0px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage1"
            :page-size="20"
            layout="total, prev, pager, next"
            :total="searchResult.total"
          >
          </el-pagination>
        </div>
      </div>
      <el-dialog
        width="30%"
        :title="estaType == 'edit' ? '编辑销售kPI' : '销售KPI'"
        :visible.sync="innerVisible"
        append-to-body
      >
        <el-form ref="form" :inline="true">
          <el-form-item label="所属销售" label-width="100px">
            <el-select
              v-model="establish.sale_id"
              filterable
              placeholder="请选择客户所属销售"
              style="width: 200px"
            >
              <el-option
                v-for="item in AdminBoxData"
                :key="item.id"
                :label="item.nickname"
                :value="item.id + ''"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="客户所属区域" label-width="100px">
            <el-select
              clearable
              filterable
              v-model="establish.area_id"
              style="width: 200px"
            >
              <el-option
                v-for="item in websiteListDQ"
                :key="item.id"
                :label="item.name"
                :value="item.id + ''"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="选择所属月份" label-width="100px">
            <el-date-picker
              key="monthrange"
              type="month"
              value-format="yyyyMM"
              v-model="establish.create_month"
              :clearable="false"
              placeholder="选择月度"
              style="width: 200px"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="任务量" label-width="100px">
            <el-input
              v-model="establish.assignment"
              placeholder="请输入内容"
              style="width: 200px"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="certainty()">确认</el-button>
          <el-button @click="innerVisible = false">取 消</el-button>
        </span>
      </el-dialog>
      <el-dialog
        width="30%"
        title="导入KPI"
        :visible.sync="innerVisibleflase"
        append-to-body
        :before-close="handleClose"
      >
        <el-date-picker
          key="monthrange"
          type="month"
          value-format="yyyyMM"
          v-model="toChannel.create_month"
          :clearable="false"
          placeholder="选择月度"
          style="width: 180px"
        >
        </el-date-picker>
        <div style="margin: 10px 0px 0px 0px">
          <el-upload
            id="upload_import_order_excel"
            class="upload-demo"
            ref="add-upload"
            action
            multiple
            :auto-upload="false"
            :limit="1"
            :on-exceed="onexceedfunt"
            :file-list="business_license"
            :on-change="
              (file, fileList) => {
                handleChange(file, fileList, 40);
              }
            "
            :on-remove="
              (file, fileList) => {
                removeChange(file, fileList, 40);
              }
            "
          >
            <el-button
              slot="trigger"
              type="primary"
              size="mini"
              icon="el-icon-upload2"
              data-tracker="P2-18"
              >上传文件</el-button
            >
          </el-upload>
        </div>
        <div style="margin: 10px 0px 0px 0px">
          <el-card class="box-card" v-if="dataResdata.length != 0">
            <div v-for="o in dataResdata" :key="o" class="text item">
              {{ o }}
            </div>
          </el-card>
          <el-card class="box-card" v-else> 导入结果: </el-card>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="ToLead()">确认</el-button>
        </span>
      </el-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 客户未回款金额 -->
    <el-dialog
      width="80%"
      title="区域客户未回款"
      :visible.sync="innerVisibleDerived"
      append-to-body
    >
      <el-form ref="form" :inline="true">
        <el-form-item label="客户所属区域" label-width="100px">
          <el-select
            clearable
            filterable
            v-model="invoiced_reaquerydata.customer_area_id"
          >
            <el-option
              v-for="item in websiteListDQ"
              :key="item.id"
              :label="item.name"
              :value="item.id + ''"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属客户" label-width="80px">
          <el-select
            id="customer_down"
            v-model="invoiced_reaquerydata.customer_id"
            filterable
            remote
            reserve-keyword
            placeholder="请选择"
            :remote-method="searchCustomerList"
          >
            <el-option
              id="customer"
              v-for="item2 in clientList"
              :key="item2.id"
              :label="item2.name"
              :value="item2.id + ''"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所属销售" label-width="80px">
          <el-select
            v-model="invoiced_reaquerydata.belong_sale_id"
            filterable
            placeholder="请选择客户所属销售"
          >
            <el-option
              v-for="item in AdminBoxData"
              :key="item.id"
              :label="item.nickname"
              :value="item.id + ''"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择月份" label-width="80px">
          <el-date-picker
            key="monthrange"
            type="month"
            value-format="yyyyMM"
            v-model="invoiced_reaquerydata.create_month"
            :clearable="false"
            placeholder="选择月度"
            style="width: 180px"
          >
          </el-date-picker>
        </el-form-item>
        <div style="margin: 0px 0px 10px 0px">
          <el-button type="primary" @click="querydata()" plain>查询</el-button>
          <el-button type="primary" @click="resetDerivedRegion()" plain
            >重置</el-button
          >
          <el-button type="primary" @click="DerivedRegionListExport()" plain
            >导出</el-button
          >
        </div>
      </el-form>
      <!-- 查询表格 -->
      <div>
        <el-table
          :data="customerdatalist"
          stripe
          style="width: 100%"
          height="300"
        >
          <el-table-column
            prop="customer_area_id_name"
            label="区域"
            width="180"
          >
          </el-table-column>
          <el-table-column prop="create_month" label="月份" width="180">
          </el-table-column>
          <el-table-column prop="account_period" label="账期" width="180">
          </el-table-column>
          <el-table-column prop="total_freight" label="未回款金额">
            <template slot-scope="scope">
              <el-tag type="danger">{{ scope.row.total_freight }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="belong_sale_id_name" label="所属销售">
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="certainty()">确认</el-button> -->
        <el-button @click="innerVisibleDerived = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 区域发货未开票 -->
    <el-dialog
      width="80%"
      title="区域客户未回款"
      :visible.sync="notinvoiceddataDerived"
      append-to-body
    >
      <el-form ref="form" :inline="true">
        <el-form-item label="客户所属区域" label-width="100px">
          <el-select
            clearable
            filterable
            v-model="invoiced_reaquerydata_ship.customer_area_id"
          >
            <el-option
              v-for="item in websiteListDQ"
              :key="item.id"
              :label="item.name"
              :value="item.id + ''"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属客户" label-width="80px">
          <el-select
            id="customer_down"
            v-model="invoiced_reaquerydata_ship.customer_id"
            filterable
            remote
            reserve-keyword
            placeholder="请选择"
            :remote-method="searchCustomerList"
          >
            <el-option
              id="customer"
              v-for="item2 in clientList"
              :key="item2.id"
              :label="item2.name"
              :value="item2.id + ''"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所属销售" label-width="80px">
          <el-select
            v-model="invoiced_reaquerydata_ship.belong_sale_id"
            filterable
            placeholder="请选择客户所属销售"
          >
            <el-option
              v-for="item in AdminBoxData"
              :key="item.id"
              :label="item.nickname"
              :value="item.id + ''"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择月份" label-width="80px">
          <el-date-picker
            key="monthrange"
            type="month"
            value-format="yyyyMM"
            v-model="invoiced_reaquerydata_ship.create_month"
            :clearable="false"
            placeholder="选择月度"
            style="width: 180px"
          >
          </el-date-picker>
        </el-form-item>
        <div style="margin: 0px 0px 10px 0px">
          <el-button type="primary" @click="DerivedRegionList_customer()" plain
            >查询</el-button
          >
          <el-button type="primary" @click="resetDerivedRegion_customer()" plain
            >重置</el-button
          >
          <el-button
            type="primary"
            @click="DerivedRegionList_customer_Expore()"
            plain
            >导出</el-button
          >
        </div>
      </el-form>
      <!-- 查询表格 -->
      <div>
        <el-table
          :data="customerdatalistdata"
          stripe
          style="width: 100%"
          height="300"
        >
          <el-table-column
            prop="customer_area_id_name"
            label="区域"
            width="180"
          >
            <template slot-scope="scope">
              <span @click="DerivedRegionpayment(scope.row)">{{
                scope.row.customer_area_id_name
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="create_month" label="月份" width="180">
          </el-table-column>
          <el-table-column prop="account_period" label="账期" width="180">
          </el-table-column>
          <el-table-column prop="total_freight" label="未回款金额">
            <template slot-scope="scope">
              <el-tag type="danger">{{ scope.row.total_freight }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="customer_id_name" label="所属客户">
          </el-table-column>
          <el-table-column prop="belong_sale_id_name" label="所属销售">
          </el-table-column>
        </el-table>
      </div>
      <!-- 运单的嵌套 -->
      <div>
        <el-dialog
          width="80%"
          title="开票具体运单"
          :visible.sync="notinvoiceddataDerivedShip"
          append-to-body
        >
          <el-form ref="form" :inline="true">
            <el-form-item label="客户所属区域" label-width="100px">
              <el-select
                clearable
                filterable
                v-model="invoiced_reaquerydata_not.customer_area_id"
              >
                <el-option
                  v-for="item in websiteListDQ"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id + ''"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="所属客户" label-width="80px">
              <el-select
                id="customer_down"
                v-model="invoiced_reaquerydata_not.customer_id"
                filterable
                remote
                reserve-keyword
                placeholder="请选择"
                :remote-method="searchCustomerList"
              >
                <el-option
                  id="customer"
                  v-for="item2 in clientList"
                  :key="item2.id"
                  :label="item2.name"
                  :value="item2.id + ''"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="所属销售" label-width="80px">
              <el-select
                v-model="invoiced_reaquerydata_not.belong_sale_id"
                filterable
                placeholder="请选择客户所属销售"
              >
                <el-option
                  v-for="item in AdminBoxData"
                  :key="item.id"
                  :label="item.nickname"
                  :value="item.id + ''"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择月份" label-width="80px">
              <el-date-picker
                key="monthrange"
                type="month"
                value-format="yyyyMM"
                v-model="invoiced_reaquerydata_not.create_month"
                :clearable="false"
                placeholder="选择月度"
                style="width: 180px"
              >
              </el-date-picker>
            </el-form-item>
            <div style="margin: 0px 0px 10px 0px">
              <el-button type="primary" @click="OutstandingdataList()" plain
                >查询</el-button
              >
              <el-button type="primary" @click="resetDerivedRegion_NOt()" plain
                >重置</el-button
              >
              <el-button
                type="primary"
                @click="DerivedRegionList_customer_Expore_data()"
                plain
                >导出</el-button
              >
            </div>
          </el-form>
          <!-- 查询表格 -->
          <div>
            <el-table
              :data="invoiced_reaquerydata_notList"
              stripe
              style="width: 100%"
              height="300"
            >
              <el-table-column
                prop="customer_area_id_name"
                label="区域"
                width="180"
              >
              </el-table-column>
              <el-table-column prop="create_month" label="月份" width="180">
              </el-table-column>
              <el-table-column prop="waybill_no" label="运单号" width="180">
              </el-table-column>
              <el-table-column prop="total_freight" label="未回款金额">
                <template slot-scope="scope">
                  <el-tag type="danger">{{ scope.row.total_freight }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="belong_sale_id_name" label="所属销售">
              </el-table-column>
              <el-table-column prop="customer_id_name" label="所属客户">
              </el-table-column>
            </el-table>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="notinvoiceddataDerivedShip = false"
              >取 消</el-button
            >
          </span>
        </el-dialog>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="notinvoiceddataDerived = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  analysisareashipment_not_invoiced,
  analysisareainvoice_unpaid,
  analysisareshipment_not_invoiced,
  analysisareinvoice_unpaid,
  analysisarecustomeshipment_not_invoicedr,
  analysisarecustomeinvoice_unpaid,
  analysisareashipment_not_invoiced_export,
  analysisareainvoice_unpaid_export,
  analysisareshipment_not_invoiced_export,
  analysisareinvoice_unpaid_export,
  analysisarecustomeshipment_not_invoicedr_export,
  analysisarecustomeinvoice_unpaid_export,
  analysis_shipment_data_statistics,
  analysis_transport_type_data_statistics,
  analysis_area_assignment,
  analysis_sale_assignment,
  shipment_data_statistics_export,
  area_assignment_exprot,
  sale_assignment_export,
  sale_task_list,
  sale_task_detail,
  sale_task_update,
  sale_task_create,
  sale_task_import,
  analysis_invoiced_area,
  analysis_invoiced_area_export,
  analysis_invoiced_customer,
  analysis_invoiced_customer_export,
  analysis_ship_not_invoice_area, //未开票
  analysis_ship_not_invoice_area_export, //未开票导出
  analysis_ship_not_invoice_customer, //区域发货未开票
  analysis_ship_not_invoice_customer_export, //区域客户发货未开票导出
  analysis_ship_not_invoice_detail, //运单列表
  analysis_ship_not_invoice_detail_export, //运单导出
  aoperate_report_customer_unreconciled,//客户超期未对账
  aoperate_report_customer_un_invoiced,//客户超期未开票
  operate_report_carrier_unreconciled,//承运商未对账
  aoperate_report_carrier_un_reimbursed,//承运商未报销
  operate_report_income_low,//运单收入低于预期
  operate_report_income_less_than_cost,//运单成本大于收入
  customer_unreconciled_export,//客户超期未对账导出
  customer_un_invoiced_export,
  carrier_unreconciled_export,
  carrier_un_reimbursed_export,
  income_low_export,
  income_less_than_cost_export,
} from "@/api/report";
import { downloadFile } from "@/page/material/common/common"; //导出函数
import UploadLink from "@/components/uploadFile/uploadLink.vue";
import { uploading } from "@/page/material/common/common";
import {
  reqWebsiteList, //
} from "@/api/waybill";
import { AdminBox } from "@/api/customer";
import { customerPeople } from "@/api/information";

import moment from "moment";
moment.locale("zh-cn");
export default {
  data() {
    return {
      tabIndex: "1",
      tabsData: [
        {
          key: "1",
          value: "区域发货未开票",
          search: null,
        },
        {
          key: "2",
          value: "区域开票未回款",
          search: null,
        },
        {
          key: "3",
          value: "销售发货未开票",
          search: null,
        },
        {
          key: "4",
          value: "销售开票未回款",
          search: null,
        },
        {
          key: "5",
          value: "客户发货未开票",
          search: null,
        },
        {
          key: "6",
          value: "客户开票未回款",
          search: null,
        },
        {
          key: "7",
          value: "区域发货数据统计",
          search: null,
        },
        {
          key: "8",
          value: "区域产品类型数据统计",
          search: null,
        },
        {
          key: "9",
          value: "区域任务进度",
          search: null,
        },
        {
          key: "10",
          value: "销售任务进度",
          search: null,
        },
        {
          key: "11",
          value: "区域开票未回款",
          search: null,
        },
        {
          key: "12",
          value: "区域发货未开票",
          search: null,
        },
        {
          key: "13",
          value: "客户超期未对账",
          search: null,
        },
        {
          key: "14",
          value: "客户对账未开票",
          search: null,
        },
        {
          key: "15",
          value: "承运商未对账",
          search: null,
        },
        {
          key: "16",
          value: "承运商未报销",
          search: null,
        },
        {
          key: "17",
          value: "运单收入低于预期",
          search: null,
        },
        {
          key: "18",
          value: "运单成本大于收入",
          search: null,
        },
      ],
      tableData: [],
      headerData: [],
      websiteListDQ: [],
      AdminBoxData: [], //所属销售
      clientList: [],
      orderSearch: {
        customer_area_id: "",
        belong_sale_id: "",
        customer_id: "",
      },
      HeightList: "auto",
      time_type: "",
      searchParams: {
        time_type: "1",
        monthrange: moment().format("YYYYMM"),
        daterange: "",
        start_year: "",
        start_week: "",
        sale_id: "",
      },
      weeksData: [],
      centerDialogVisible: false,
      saletableData: [],
      searchResult: {
        create_month: "",
        sale_id: "", // 销售id
        area_id: "", // 区域id'
        page: 1,
        page_size: 10,
        total: 0,
      },
      innerVisible: false,
      establish: {
        id: "", //选中的id
        sale_id: "", // 销售id
        area_id: "", // 区域id
        assignment: "", // 任务量 500000
        create_month: "", // 所属月份 202309
      },
      estaType: "",
      innerVisibleflase: false,
      toChannel: {
        file_name: "",
        header_id: "48",
        create_month: "",
      },
      business_license: [],
      dataResdata: [],
      currentPage1: 1,
      //
      invoiced_areaquery: {
        customer_area_id: "",
        create_month: "",
      },
      innerVisibleDerived: false,
      invoiced_reaquerydata: {
        customer_area_id: "",
        customer_id: "",
        belong_sale_id: "",
        create_month: "",
      },
      customerdatalist: [],
      notinvoiceddataDerived: false,
      invoiced_reaquerydata_ship: {
        customer_area_id: "",
        customer_id: "",
        belong_sale_id: "",
        create_month: "",
      },
      customerdatalistdata: [],
      notinvoiceddataDerivedShip: false,
      invoiced_reaquerydata_not: {
        customer_area_id: "",
        customer_id: "",
        belong_sale_id: "",
        create_month: "",
      },
      invoiced_reaquerydata_notList: [],
      ReimburPaging:{
        page:1,
        page_size:10,
        total:0,
        currentPage4:1,
      },

    };
  },
  components: { UploadLink },
  computed: {},
  watch: {
    // el-table绑定的data
    tableData: {
      handler() {
        // console.log("datatadklfj ljk");
        this.$nextTick(() => {
          this.$refs.tableRef.doLayout();
        });
      },
      deep: true,
    },
    $route: {
      handler(newV, oldV) {
        if (this.$route.query.key == 29) {
          this.tabIndex = "10";
        } else if (this.$route.query.key == 30) {
          this.tabIndex = "9";
        } else if (this.$route.query.key == 31) {
          this.tabIndex = "12";
        } else if (this.$route.query.key == 32) {
          this.tabIndex = "11";
        }
        this.handleTabChange(this.tabIndex);
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.getWebsiteListDQFn();
    this.AdminBoxFn();
    // this.HeightList = document.documentElement.clientHeight - 150;
    for (let i = 1; i < 54; i++) {
      this.weeksData.push({
        key: i < 10 ? "0" + i : i + "",
        value: `第${i}周`,
      });
    }
    // this.handleChangeTimeType()
  },
  methods: {
    // 客户区域
    async getWebsiteListDQFn() {
      let result = await reqWebsiteList({ branch_type: "3" });
      this.websiteListDQ = result.data;
    },
    AdminBoxFn() {
      let data = {
        user_type: "0",
      };
      AdminBox(data).then((res) => {
        if (res.code === 10000) {
          this.AdminBoxData = res.data;
        }
      });
    },
    searchCustomerList(query) {
      // console.log(query, "namge");
      //获取客户
      if (query !== "") {
        setTimeout(async () => {
          let result = await customerPeople({
            name: query, // 名称
            id: "",
            is_send: "1",
            is_receive: "",
          });
          if (result.data.length > 0) {
            this.clientList = result.data;
          } else {
            this.clientList = [];
          }
        }, 200);
      } else {
        this.clientList = [];
      }
    },
    handleTabChange(val) {
      // console.log("数据的切换");
      this.tabIndex = val;
      Object.assign(this.$data.orderSearch, this.$options.data().orderSearch);
      Object.assign(this.$data.searchParams, this.$options.data().searchParams);
      Object.assign(
        this.$data.invoiced_areaquery,
        this.$options.data().invoiced_areaquery
      );
      Object.assign(this.$data.ReimburPaging,this.$options.data().ReimburPaging)
      this.interfacedata();
    },
    querydata() {
      this.interfacedata();
    },
    resetdata() {
      Object.assign(this.$data.orderSearch, this.$options.data().orderSearch);
      Object.assign(this.$data.searchParams, this.$options.data().searchParams);
      Object.assign(
        this.$data.invoiced_areaquery,
        this.$options.data().invoiced_areaquery
      );
      Object.assign(
        this.$data.invoiced_reaquerydata,
        this.$options.data().invoiced_reaquerydata
      );
      this.interfacedata();
    },
    // 导出的数据
    derivedata() {
      if (this.tabIndex == 1) {
        var param = {
          customer_area_id: this.orderSearch.customer_area_id,
        };
        analysisareashipment_not_invoiced_export(param).then((res) => {
          if (res.code == 10000) {
            var dataurl = "https://" + res.data.loaded_url;
            downloadFile(dataurl);
            this.$message({
              type: "success",
              message: "导出成功",
            });
          }
        });
      } else if (this.tabIndex == 2) {
        var param = {
          customer_area_id: this.orderSearch.customer_area_id,
        };
        analysisareainvoice_unpaid_export(param).then((res) => {
          if (res.code == 10000) {
            var dataurl = "https://" + res.data.loaded_url;
            downloadFile(dataurl);
            this.$message({
              type: "success",
              message: "导出成功",
            });
          }
        });
      } else if (this.tabIndex == 3) {
        var param = {
          belong_sale_id: this.orderSearch.belong_sale_id,
        };
        analysisareshipment_not_invoiced_export(param).then((res) => {
          if (res.code == 10000) {
            var dataurl = "https://" + res.data.loaded_url;
            downloadFile(dataurl);
            this.$message({
              type: "success",
              message: "导出成功",
            });
          }
        });
      } else if (this.tabIndex == 4) {
        var param = {
          belong_sale_id: this.orderSearch.belong_sale_id,
        };
        analysisareinvoice_unpaid_export(param).then((res) => {
          if (res.code == 10000) {
            var dataurl = "https://" + res.data.loaded_url;
            downloadFile(dataurl);
            this.$message({
              type: "success",
              message: "导出成功",
            });
          }
        });
      } else if (this.tabIndex == 5) {
        var param = {
          customer_id: this.orderSearch.customer_id,
          belong_sale_id: this.orderSearch.belong_sale_id,
          customer_area_id: this.orderSearch.customer_area_id,
        };
        analysisarecustomeshipment_not_invoicedr_export(param).then((res) => {
          if (res.code == 10000) {
            var dataurl = "https://" + res.data.loaded_url;
            downloadFile(dataurl);
            this.$message({
              type: "success",
              message: "导出成功",
            });
          }
        });
      } else if (this.tabIndex == 6) {
        var param = {
          customer_id: this.orderSearch.customer_id,
          belong_sale_id: this.orderSearch.belong_sale_id,
          customer_area_id: this.orderSearch.customer_area_id,
        };
        analysisarecustomeinvoice_unpaid_export(param).then((res) => {
          if (res.code == 10000) {
            var dataurl = "https://" + res.data.loaded_url;
            downloadFile(dataurl);
            this.$message({
              type: "success",
              message: "导出成功",
            });
          }
        });
      } else if (this.tabIndex == 7) {
        var param = {
          customer_area_id: this.orderSearch.customer_area_id,
          create_month:
            this.searchParams.time_type == 1
              ? this.searchParams.monthrange
              : "",
          create_day:
            this.searchParams.time_type == 2 ? this.searchParams.daterange : "",
          create_week:
            this.searchParams.time_type == 3
              ? this.searchParams.start_year + this.searchParams.start_week
              : "",
        };
        shipment_data_statistics_export(param).then((res) => {
          var dataurl = "https://" + res.data.loaded_url;
          downloadFile(dataurl);
          this.$message({
            type: "success",
            message: "导出成功",
          });
        });
      } else if (this.tabIndex == 8) {
        var param = {
          customer_area_id: this.orderSearch.customer_area_id,
          create_month:
            this.searchParams.time_type == 1
              ? this.searchParams.monthrange
              : "",
          create_day:
            this.searchParams.time_type == 2 ? this.searchParams.daterange : "",
          create_week:
            this.searchParams.time_type == 3
              ? this.searchParams.start_year + this.searchParams.start_week
              : "",
        };
        shipment_data_statistics_export(param).then((res) => {
          var dataurl = "https://" + res.data.loaded_url;
          downloadFile(dataurl);
          this.$message({
            type: "success",
            message: "导出成功",
          });
        });
      } else if (this.tabIndex == 9) {
        var param = {
          sale_id: this.searchParams.sale_id,
          create_month: this.searchParams.monthrange,
        };
        area_assignment_exprot(param).then((res) => {
          var dataurl = "https://" + res.data.loaded_url;
          downloadFile(dataurl);
          this.$message({
            type: "success",
            message: "导出成功",
          });
        });
      } else if (this.tabIndex == 10) {
        var param = {
          sale_id: this.searchParams.sale_id,
          create_month: this.searchParams.monthrange,
        };
        sale_assignment_export(param).then((res) => {
          var dataurl = "https://" + res.data.loaded_url;
          downloadFile(dataurl);
          this.$message({
            type: "success",
            message: "导出成功",
          });
        });
      } else if (this.tabIndex == 11) {
        var param = {
          customer_area_id: this.invoiced_areaquery.customer_area_id,
          create_month: this.invoiced_areaquery.create_month,
        };
        analysis_invoiced_area_export(param).then((res) => {
          var dataurl = "https://" + res.data.loaded_url;
          downloadFile(dataurl);
          this.$message({
            type: "success",
            message: "导出成功",
          });
        });
      } else if (this.tabIndex == 12) {
        var param = {
          customer_area_id: this.invoiced_areaquery.customer_area_id,
          create_month: this.invoiced_areaquery.create_month,
        };
        analysis_ship_not_invoice_area_export(param).then((res) => {
          var dataurl = "https://" + res.data.loaded_url;
          downloadFile(dataurl);
          this.$message({
            type: "success",
            message: "导出成功",
          });
        });
      }else if (this.tabIndex == 13) {
        var param = {
        
        };
        customer_unreconciled_export(param).then((res) => {
          var dataurl = "https://" + res.data.loaded_url;
          downloadFile(dataurl);
          this.$message({
            type: "success",
            message: "导出成功",
          });
        });
      }
      else if (this.tabIndex == 14) {
        var param = {
          
        };
        customer_un_invoiced_export(param).then((res) => {
          var dataurl = "https://" + res.data.loaded_url;
          downloadFile(dataurl);
          this.$message({
            type: "success",
            message: "导出成功",
          });
        });
      }
      else if (this.tabIndex == 15) {
        var param = {
        
        };
        carrier_unreconciled_export(param).then((res) => {
          var dataurl = "https://" + res.data.loaded_url;
          downloadFile(dataurl);
          this.$message({
            type: "success",
            message: "导出成功",
          });
        });
      } else if (this.tabIndex == 16) {
        var param = {
        };
        carrier_un_reimbursed_export(param).then((res) => {
          var dataurl = "https://" + res.data.loaded_url;
          downloadFile(dataurl);
          this.$message({
            type: "success",
            message: "导出成功",
          });
        });
      } else if (this.tabIndex == 17) {
        var param = {
          page: this.ReimburPaging.page,
          page_size: this.ReimburPaging.page_size
        };
        income_low_export(param).then((res) => {
          var dataurl = "https://" + res.data.loaded_url;
          downloadFile(dataurl);
          this.$message({
            type: "success",
            message: "导出成功",
          });
        });
      } else if (this.tabIndex == 18) {
        var param = {
          page: this.ReimburPaging.page,
          page_size: this.ReimburPaging.page_size
        };
        income_less_than_cost_export(param).then((res) => {
          var dataurl = "https://" + res.data.loaded_url;
          downloadFile(dataurl);
          this.$message({
            type: "success",
            message: "导出成功",
          });
        });
      }
    },
    changeHeight() {
      if (this.tableData.length > 7) {
        //两排操作栏
        this.HeightList = document.documentElement.clientHeight - 225;
      } else {
        this.HeightList = "auto";
      }
    },
    // 返回的数据列表
    interfacedata() {
      if (this.tabIndex == 1) {
        var param = {
          customer_area_id: this.orderSearch.customer_area_id,
        };
        analysisareashipment_not_invoiced(param).then((res) => {
          this.tableData = res.data.data;
          this.changeHeight();
          this.headerData = res.data.show_titles;
        });
      } else if (this.tabIndex == 2) {
        var param = {
          customer_area_id: this.orderSearch.customer_area_id,
        };
        analysisareainvoice_unpaid(param).then((res) => {
          this.tableData = res.data.data;
          this.changeHeight();
          this.headerData = res.data.show_titles;
        });
      } else if (this.tabIndex == 3) {
        var param = {
          belong_sale_id: this.orderSearch.belong_sale_id,
        };
        analysisareshipment_not_invoiced(param).then((res) => {
          this.tableData = res.data.data;
          this.changeHeight();
          this.headerData = res.data.show_titles;
        });
      } else if (this.tabIndex == 4) {
        var param = {
          belong_sale_id: this.orderSearch.belong_sale_id,
        };
        analysisareinvoice_unpaid(param).then((res) => {
          this.tableData = res.data.data;
          this.changeHeight();
          this.headerData = res.data.show_titles;
        });
      } else if (this.tabIndex == 5) {
        var param = {
          customer_id: this.orderSearch.customer_id,
          belong_sale_id: this.orderSearch.belong_sale_id,
          customer_area_id: this.orderSearch.customer_area_id,
        };
        analysisarecustomeshipment_not_invoicedr(param).then((res) => {
          this.tableData = res.data.data;
          this.changeHeight();
          this.headerData = res.data.show_titles;
        });
      } else if (this.tabIndex == 6) {
        var param = {
          customer_id: this.orderSearch.customer_id,
          belong_sale_id: this.orderSearch.belong_sale_id,
          customer_area_id: this.orderSearch.customer_area_id,
        };
        analysisarecustomeinvoice_unpaid(param).then((res) => {
          this.tableData = res.data.data;
          this.changeHeight();
          this.headerData = res.data.show_titles;
        });
      } else if (this.tabIndex == 7) {
        // console.log(this.searchParams);
        // console.log(this.searchParams.time_type == 1, "time_typetime_type");
        var param = {
          customer_area_id: this.orderSearch.customer_area_id,
          create_month:
            this.searchParams.time_type == 1
              ? this.searchParams.monthrange
              : "",
          create_day:
            this.searchParams.time_type == 2 ? this.searchParams.daterange : "",
          create_week:
            this.searchParams.time_type == 3
              ? this.searchParams.start_year + this.searchParams.start_week
              : "",
        };
        analysis_shipment_data_statistics(param).then((res) => {
          this.tableData = res.data.data;
          this.changeHeight();
          this.headerData = res.data.show_titles;
        });
      } else if (this.tabIndex == 8) {
        var param = {
          customer_area_id: this.orderSearch.customer_area_id,
          create_month:
            this.searchParams.time_type == 1
              ? this.searchParams.monthrange
              : "",
          create_day:
            this.searchParams.time_type == 2 ? this.searchParams.daterange : "",
          create_week:
            this.searchParams.time_type == 3
              ? this.searchParams.start_year + this.searchParams.start_week
              : "",
        };
        analysis_transport_type_data_statistics(param).then((res) => {
          this.tableData = res.data.data;
          this.changeHeight();
          this.headerData = res.data.show_titles;
        });
      } else if (this.tabIndex == 9) {
        var param = {
          sale_id: this.searchParams.sale_id,
          create_month: this.searchParams.monthrange,
        };
        analysis_area_assignment(param).then((res) => {
          this.tableData = res.data.data;
          this.changeHeight();
          this.headerData = res.data.show_titles;
        });
      } else if (this.tabIndex == 10) {
        var param = {
          sale_id: this.searchParams.sale_id,
          create_month: this.searchParams.monthrange,
        };
        analysis_sale_assignment(param).then((res) => {
          this.tableData = res.data.data;
          this.changeHeight();
          this.headerData = res.data.show_titles;
        });
      } else if (this.tabIndex == 11) {
        var param = {
          customer_area_id: this.invoiced_areaquery.customer_area_id,
          create_month: this.invoiced_areaquery.create_month,
        };
        analysis_invoiced_area(param).then((res) => {
          this.tableData = res.data.data_list;
        });
      } else if (this.tabIndex == 12) {
        var param = {
          customer_area_id: this.invoiced_areaquery.customer_area_id,
          create_month: this.invoiced_areaquery.create_month,
        };
        analysis_ship_not_invoice_area(param).then((res) => {
          this.tableData = res.data.data_list;
        });
      } else if (this.tabIndex == 13) {
        var param = {
        };
        aoperate_report_customer_unreconciled(param).then((res) => {
          this.tableData = res.data.data
          this.headerData = res.data.show_title;
        });
      }else if (this.tabIndex == 14) {
        var param = {
        };
        aoperate_report_customer_un_invoiced(param).then((res) => {
          this.tableData = res.data.data
          this.headerData = res.data.show_title;
        });
      }
      else if (this.tabIndex == 15) {
        var param = {
        };
        operate_report_carrier_unreconciled(param).then((res) => {
          this.tableData = res.data.data
          this.headerData = res.data.show_title;
        });
      } else if (this.tabIndex == 16) {
        var param = {
        };
        aoperate_report_carrier_un_reimbursed(param).then((res) => {
          this.tableData = res.data.data
          this.headerData = res.data.show_title;
        });
      } else if (this.tabIndex == 17) {
        var param = {
          page: this.ReimburPaging.page,
          page_size: this.ReimburPaging.page_size
        };
        operate_report_income_low(param).then((res) => {
          this.tableData = res.data.data
          this.headerData = res.data.show_title;
          this.ReimburPaging.total = res.data.total
        });
      }else if (this.tabIndex == 18) {
        var param = {
           page: this.ReimburPaging.page,
           page_size: this.ReimburPaging.page_size
        };
        operate_report_income_less_than_cost(param).then((res) => {
          this.tableData = res.data.data
          this.headerData = res.data.show_title;
          this.ReimburPaging.total = res.data.total
        });
      }
    },
    handleChangeTimeType(val) {
      if (this.searchParams.time_type == "1") {
        const nowMonth = moment().format("YYYYMM");
        this.searchParams.monthrange = nowMonth;
      } else if (this.searchParams.time_type == "2") {
        this.searchParams.daterange = moment().format("YYYYMMDD");
      }
      if (this.searchParams.time_type == "3") {
        this.$set(this.searchParams, "start_year", "2023");
        this.$set(this.searchParams, "start_week", "");
      }
    },
    SalesKPI() {
      this.centerDialogVisible = true;
      this.QueryKPI();
    },
    QueryKPIdata() {
      this.searchResult.page = 1;
      this.QueryKPI();
    },
    QueryKPI() {
      var param = {
        create_month: this.searchResult.create_month,
        sale_id: this.searchResult.sale_id, // 销售id
        area_id: this.searchResult.area_id, // 区域id
        page: this.searchResult.page,
        page_size: this.searchResult.page_size,
      };
      sale_task_list(param).then((res) => {
        this.saletableData = res.data.data;
        this.searchResult.page = res.data.pagination.page;
        this.searchResult.page_size = res.data.pagination.page_size;
        this.searchResult.total = res.data.pagination.total;
        // console.log(res);
      });
    },
    restqueryKPI() {
      Object.assign(this.$data.searchResult, this.$options.data().searchResult);
      this.QueryKPI();
    },
    handleEdit(value) {
      this.innerVisible = true;
      this.estaType = "edit";
      var param = {
        id: value.id,
      };
      sale_task_detail(param).then((res) => {
        if (res.code == 10000) {
          this.establish = res.data;
        }
      });
    },
    certainty() {
      if (this.estaType == "edit") {
        var param = {
          id: this.establish.id, //
          sale_id: this.establish.sale_id, // 销售id
          area_id: this.establish.area_id, // 区域id
          assignment: this.establish.assignment, // 任务量 500000
          create_month: this.establish.create_month, // 所属月份 202309
        };
        sale_task_update(param).then((res) => {
          if (res.code == 10000) {
            this.innerVisible = false;
            this.QueryKPI();
          }
        });
      } else if (this.estaType == "add") {
        // console.log("函数进入当前的内容");
        var param = {
          sale_id: this.establish.sale_id, // 销售id
          area_id: this.establish.area_id, // 区域id
          assignment: this.establish.assignment, // 任务量 500000
          create_month: this.establish.create_month, // 所属月份 202309
        };
        sale_task_create(param).then((res) => {
          if (res.code == 10000) {
            this.innerVisible = false;
            this.QueryKPI();
          }
        });
      }
    },
    newlyincreased() {
      this.innerVisible = true;
      this.estaType = "add";
      Object.assign(this.$data.establish, this.$options.data().establish);
    },
    toleadcreased() {
      this.innerVisibleflase = true;
    },
    ToLead() {
      if (this.toChannel.create_month != "") {
        if (this.toChannel.file_name != "") {
          var param = {
            file_name: this.toChannel.file_name + "",
            header_id: "48",
            create_month: this.toChannel.create_month,
          };
          sale_task_import(param).then((res) => {
            if (res.code == 10000) {
              this.dataResdata = res.data.res;
            }
          });
        } else {
          this.$message({
            showClose: true,
            message: "请上传导入文件",
            type: "warning",
          });
        }
      } else {
        this.$message({
          showClose: true,
          message: "请选择月份",
          type: "warning",
        });
      }
    },
    // 上传到oss上
    handleChange(file, fileList, type) {
      var filelist = file.raw; //文件
      var filename = file.raw.uid + file.raw.name; //通过 uid和name组成文件的名字
      uploading(filelist, filename, type).then((result) => {
        var resname = result.name;
        this.toChannel.file_name = resname;
        var resType = resname.split("/")[0];
        var filehttp = "http://oss.dushisc.com/";
        //this.ImportDataUrl = filehttp + resname
        switch (resType) {
          case "40":
            this.business_license.push({
              name: filehttp + result.name,
            });
            break;
        }
      });
    },
    // 删除调用
    removeChange(file, fileList, type) {
      switch (type) {
        case 40:
          if (this.business_license.length > 0) {
            for (var i = 0; i < this.business_license.length; i++) {
              if (this.business_license[i].uid == file.uid) {
                this.business_license.splice(i, 1);
              }
            }
          }
          break;
      }
    },
    onexceedfunt() {
      let msg = "请勿上传多个文件";
      this.ContentSuccess(msg);
    },
    handleClose() {
      Object.assign(this.$data.toChannel, this.$options.data().toChannel);
      this.business_license = [];
      this.innerVisibleflase = false;
      this.dataResdata = [];
      this.QueryKPI();
    },
    // 分页功能
    handleSizeChange() {},
    // 当前第几页
    handleCurrentChange(val) {
      this.searchResult.page = val;
      this.QueryKPI();
    },
    DerivedRegion(row, event, column) {
      // console.log(row.customer_area_id,"this.tabIndex")
      if (this.tabIndex == "11") {
        this.innerVisibleDerived = true;
        this.invoiced_reaquerydata.customer_area_id = row.customer_area_id;
        this.DerivedRegionList();
      } else if (this.tabIndex == "12") {
        this.notinvoiceddataDerived = true;
        this.invoiced_reaquerydata_ship.customer_area_id = row.customer_area_id;
        this.DerivedRegionList_customer();
      }
    },
    //
    resetDerivedRegion() {
      Object.assign(
        this.$data.invoiced_reaquerydata,
        this.$options.data().invoiced_reaquerydata
      );
      this.DerivedRegionList();
    },
    DerivedRegionList(value) {
      var param = {
        customer_area_id: this.invoiced_reaquerydata.customer_area_id,
        customer_id: this.invoiced_reaquerydata.customer_id,
        belong_sale_id: this.invoiced_reaquerydata.belong_sale_id,
        create_month: this.invoiced_reaquerydata.create_month,
      };
      analysis_invoiced_customer(param).then((res) => {
        this.customerdatalist = res.data;
      });
    },
    DerivedRegionListExport() {
      var param = {
        customer_area_id: this.invoiced_reaquerydata.customer_area_id,
        customer_id: this.invoiced_reaquerydata.customer_id,
        belong_sale_id: this.invoiced_reaquerydata.belong_sale_id,
        create_month: this.invoiced_reaquerydata.create_month,
      };
      analysis_invoiced_customer_export(param).then((res) => {
        if (res.code == 10000) {
          var dataurl = "https://" + res.data.loaded_url;
          downloadFile(dataurl);
          this.$message({
            type: "success",
            message: "导出成功",
          });
        }
      });
    },
    // 发货未开票
    DerivedRegionList_customer(value) {
      var param = {
        customer_area_id: this.invoiced_reaquerydata_ship.customer_area_id,
        customer_id: this.invoiced_reaquerydata_ship.customer_id,
        belong_sale_id: this.invoiced_reaquerydata_ship.belong_sale_id,
        create_month: this.invoiced_reaquerydata_ship.create_month,
      };
      analysis_ship_not_invoice_customer(param).then((res) => {
        this.customerdatalistdata = res.data;
      });
    },
    // 重置
    resetDerivedRegion_customer() {
      Object.assign(
        this.$data.invoiced_reaquerydata_ship,
        this.$options.data().invoiced_reaquerydata_ship
      );
      this.DerivedRegionList_customer();
    },
    // 发货未开票导出
    DerivedRegionList_customer_Expore() {
      var param = {
        customer_area_id: this.invoiced_reaquerydata_ship.customer_area_id,
        customer_id: this.invoiced_reaquerydata_ship.customer_id,
        belong_sale_id: this.invoiced_reaquerydata_ship.belong_sale_id,
        create_month: this.invoiced_reaquerydata_ship.create_month,
      };
      analysis_ship_not_invoice_customer_export(param).then((res) => {
        if (res.code == 10000) {
          var dataurl = "https://" + res.data.loaded_url;
          downloadFile(dataurl);
          this.$message({
            type: "success",
            message: "导出成功",
          });
        }
      });
    },
    // 未回款的数据
    DerivedRegionpayment(value) {
      this.notinvoiceddataDerivedShip = true;
      this.invoiced_reaquerydata_not.customer_area_id = value.customer_area_id;
      this.OutstandingdataList();
    },
    // 运单未回款的列表
    OutstandingdataList() {
      var param = {
        customer_area_id: this.invoiced_reaquerydata_not.customer_area_id,
        customer_id: this.invoiced_reaquerydata_not.customer_id,
        belong_sale_id: this.invoiced_reaquerydata_not.belong_sale_id,
        create_month: this.invoiced_reaquerydata_not.create_month,
      };
      analysis_ship_not_invoice_detail(param).then((res) => {
        this.invoiced_reaquerydata_notList = res.data;
      });
    },
    resetDerivedRegion_NOt() {
      Object.assign(
        this.$data.invoiced_reaquerydata_not,
        this.$options.data().invoiced_reaquerydata_not
      );
      this.OutstandingdataList();
    },
    // 运单未回款的列表导出
    DerivedRegionList_customer_Expore_data() {
      var param = {
        customer_area_id: this.invoiced_reaquerydata_not.customer_area_id,
        customer_id: this.invoiced_reaquerydata_not.customer_id,
        belong_sale_id: this.invoiced_reaquerydata_not.belong_sale_id,
        create_month: this.invoiced_reaquerydata_not.create_month,
      };
      analysis_ship_not_invoice_detail_export(param).then((res) => {
        if (res.code == 10000) {
          var dataurl = "https://" + res.data.loaded_url;
          downloadFile(dataurl);
          this.$message({
            type: "success",
            message: "导出成功",
          });
        }
      });
    },
    handleSizeChangeObj(val) {
      this.ReimburPaging.page_size = val
      this.interfacedata()
    },
    handleCurrentChangeObj(val) {
      this.ReimburPaging.page = val
      this.interfacedata()
    },
    pageJumps(value){
      const id = value.waybill_id
      let text = this.$router.resolve({
        name: "waybillDetail",
        query: { id , activeName: "1" },
      });
      window.open(text.href, "_blank");
    }
  },
};
</script>
<style lang="scss" scoped>
/deep/ #tablestyle .gutter {
  display: none;
}

.customermanagementlist {
  background: #fff;
  padding: 10px 0px;

  .orderHeader {
    margin-top: 5px;
    background-color: #fff;

    .orderSearch {
      form {
        ::v-deep .el-form-item__label {
          font-size: 14px;
        }

        .el-textarea {
          width: 135px;
        }
      }
    }
  }

  .content {
    display: flex;
    width: 100%;

    .in_concent_left_1 {
      border-right: 1px solid #ededed;
      height: 100%;

      .in_concent_left_pitch {
        width: 180px;
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .in_concent_left_pitch:hover {
        height: 40px;
        width: 180px;
        background: #e6f7ff;
        line-height: 40px;
        padding-left: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .choose_itch {
        height: 40px;
        width: 180px;
        background: #e6f7ff;
        line-height: 40px;
        padding-left: 20px;
        color: #2798ff;
        border-right: 4px solid #1890ff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .content-left {
      flex: 0 0 210px;
    }

    .content-right {
      width: calc(100% - 240px);
      margin: 10px 10px 0px 20px;

      .content-right-wrap {
        padding: 20px;
        width: 100%;
        box-sizing: border-box;
      }
    }
  }
}
</style>